// recursiveFlatten : 재귀적으로 배열을 펼치는 함수
export function createVNode(type, props, ...children) {
  const flattenedChildren = recursiveFlatten(children, (val) => {
    return checkNullishExceptZero(val);
  });

  return { type, props, children: flattenedChildren };
}

// falsy 값은 빈 문자열로 변환
// 숫자, 문자 = > 문자열로 변환
// 함수 => 함수 실행 결과로 변환

// vNode : {type , props, children}
export function normalizeVNode(vNode) {
  if (typeof vNode === "boolean" || !checkNullishExceptZero(vNode)) {
    return "";
  }

  if (typeof vNode === "number" || typeof vNode === "string") {
    return String(vNode);
  }

  if (typeof vNode === "object") {
    if (typeof vNode.type === "function") {
      return normalizeVNode(
        vNode.type({ ...vNode.props, children: vNode.children }),
      );
    }

    return {
      type: vNode.type,
      props: vNode.props,
      children: vNode.children
        .map(normalizeVNode)
        .filter(checkNullishExceptZero),
    };
  }
}

export function createElement(vNode) {
  if (typeof vNode === "function" || typeof vNode?.type === "function") {
    throw new Error("NEED NORMALIZE");
  }
  if (typeof vNode === "boolean" || !checkNullishExceptZero(vNode)) {
    return document.createTextNode("");
  }

  // 문자열 또는 숫자인 경우 텍스트 노드로 처리
  if (typeof vNode === "string" || typeof vNode === "number") {
    return document.createTextNode(String(vNode));
  }

  // 배열로 들어온 경우 fragment로 처리
  if (Array.isArray(vNode)) {
    const frag = document.createDocumentFragment();
    vNode.forEach((node) => {
      frag.append(makeElement(node));
    });
    return frag;
  }

  // 그 외의 경우 element로 처리
  const el = makeElement(vNode);

  if (Array.isArray(vNode.children)) {
    vNode.children.forEach((child) => {
      el.appendChild(createElement(child));
    });
  }

  return el;
}

function makeElement(vNode) {
  const el = document.createElement(vNode.type);
  updateAttributes(el, vNode.props);
  return el;
}

function updateAttributes($el, props) {
  for (const prop in props) {
    if (prop?.startsWith("on")) {
      // 이벤트 속성
      addEvent($el, prop.slice(2).toLowerCase(), props[prop]);
      continue;
    }
    if (prop === "class") {
      // class 속성
      $el.classList.add(props[prop]);
      continue;
    }
    $el.setAttribute(prop, props[prop]); // class 속성과 나머지 속성 동시 처리
  }
}

export function renderElement(vNode, container) {
  //생략
  container.appendChild(createElement(vNode));
}

// createElement 내부에서 이벤트를 전역 이벤트 관리 객체에 넣어주는 코드는 attr할당 부분에 있음
function updateAttributes($el, props) {
  for (const prop in props) {
    if (prop?.startsWith("on")) {
      addEvent($el, prop.slice(2).toLowerCase(), props[prop]); // 이벤트 전역 이벤트 관리 객체에 넣어주는 코드
      continue;
    }
    $el.setAttribute(replaceIfPropIsClass(prop), props[prop]);
  }
}

globalEvents의 형태
{
  eventType1 : WeakMap {
    element1 : handler1,
    element2 : handler2,
    ...
  },
  eventType2 : WeakMap {
    element1 : handler1,
    element2 : handler2,
    ...
  },
  ...
}

export function addEvent(element, eventType, handler) {
  if (!element || typeof handler !== "function") return;

  globalEvents[eventType] = globalEvents[eventType] || new WeakMap();
  globalEvents[eventType].set(element, handler);
}

export function removeEvent(element, eventType, handler) {
  if (globalEvents[eventType].get(element) === handler) {
    globalEvents[eventType].delete(element);
  }
}

export function setupEventListeners(root) {
  for (const eventType in globalEvents) {
    root.removeEventListener(eventType, handleGlobalEvents);
    root.addEventListener(eventType, handleGlobalEvents);
  }
}

export function handleGlobalEvents(e) {
  if (globalEvents[e.type].has(e.target)) {
    globalEvents[e.type].get(e.target)(e);
  }
}

let oldVNode = null;
export function render(vNode, container) {
  // 생략 - 1.1~1.5
  oldVNode = vNode; // 최초 렌더링 후 oldVNode 저장
}

export function renderElement(vNode, container) {
  if (!vNode) {
    return;
  }
  // step1. vNode 정규화
  const newVNode = normalizeVNode(vNode);

  // step2. 정규화된 vNode를 기반으로 DOM 생성 또는 업데이트
  if (!oldVNode) {
    // step3. DOM 추가
    const element = createElement(newVNode);
    container.append(element); // 첫 렌더링 때만 container에 DOM 추가
  } else {
    // step3-diff. DOM 업데이트
    if (container.firstChild) {
      updateElement(container, newVNode, oldVNode);
    } else {
      const element = createElement(newVNode);
      container.append(element);
    }
  }
  //생략
}

export function updateElement(parentElement, newNode, oldNode, index = 0) {
  if (newNode && !oldNode) {
    parentElement.appendChild(createElement(newNode));
    return;
  }

  // newNode가 없는 경우 oldNode 제거
  if (oldNode && !newNode) {
    parentElement.removeChild(parentElement.childNodes[index]);
    return;
  }

  // 텍스트 노드인 경우
  if (typeof newNode === "string" || typeof newNode === "number") {
    if (oldNode !== newNode) {
      parentElement.childNodes[index].textContent = newNode;
    }
    return;
  }

  // newNode가 oldNode와 다른 타입인 경우
  if (newNode.type !== oldNode.type) {
    parentElement.replaceChild(
      createElement(newNode),
      parentElement.childNodes[index],
    );
    return;
  }

  // 타입이 같은 경우 props 및 children 비교
  updateAttributes(
    parentElement.childNodes[index],
    newNode.props || {},
    oldNode.props || {},
  );

  // children이 없는 경우 return
  if (Math.max(newNode.children.length, oldNode.children.length) === 0) {
    return;
  }

  const maxLength = Math.max(newNode.children.length, oldNode.children.length);
  for (let i = 0; i < maxLength; i++) {
    updateElement(
      parentElement.childNodes[index],
      newNode.children[i],
      oldNode.children[i],
      i,
    );
  }
}

function updateAttributes(target, originNewProps, originOldProps) {
  const newPropsArr = originNewProps ? Object.entries(originNewProps) : [];
  const oldPropsArr = originOldProps ? Object.entries(originOldProps) : [];

  for (const [prop, value] of oldPropsArr) {
    let newPropValue = originNewProps[prop];

    // 이벤트 프로퍼티인 경우 이벤트 제거하고 시작
    if (isEventProp(prop)) {
      removeEvent(target, replaceEventProp(prop), value);
      newPropValue = originNewProps[replaceEventProp(prop)];
    }

    // 새로 들어올 프로퍼티 값이 없는 경우 제거
    if (newPropValue === undefined) {
      target.removeAttribute(prop);
      continue;
    }

    // 새로 들어올 프로퍼티 값이 있는 경우 업데이트
    if (value !== newPropValue) {
      if (isClass(prop)) {
        target.classList = newPropValue;
        continue;
      }
      if (isEventProp(prop)) {
        addEvent(target, replaceEventProp(prop), newPropValue);
        continue;
      }

      target.setAttribute(prop, newPropValue);
      continue;
    }

    // 새로 들어올 프로퍼티 값이 같은 경우
    if (value === originNewProps[prop]) {
      continue;
    }
  }

  for (const [prop, value] of newPropsArr) {
    // 이전 프로퍼티에 없는 프로퍼티인 경우 추가
    if (oldPropsArr[prop] === undefined) {
      if (isEventProp(prop)) {
        addEvent(target, replaceEventProp(prop), value);
        return;
      }
      if (isClass(prop)) {
        target.classList = value;
        continue;
      }
      target.setAttribute(prop, value);
    }
  }
}